<template>
    <div>
        <h2>店铺管理</h2>
        <el-divider></el-divider>
        <el-tabs v-model="activeName">
            <el-tab-pane label="淘宝" name="first">
                <div v-if="currentPanel == 'list'">
                    <el-card class="box-card">
                        <el-row>
                            <el-col :span="2"><br>
                                <img src="@/views/merchOrder/images/taobao.png" style="height: 80px;width: 80px">
                            </el-col>
                            <el-col :span="22" >
                                <h3>绑定店铺</h3>
                                <a>绑定成功后，可以：①自动同步客户订单 ②在侧边栏一键发送商品给客户</a>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-button type="primary" @click="currentHandler('shopAdd')">绑定店铺</el-button><a>&nbsp;&nbsp;&nbsp;最多绑定5个,当前还可以绑定4个</a>
                        <!--表格-->
                        <el-table :data="tableData" style="width: 100%"
                                :default-sort = "{prop: 'date', order: 'descending'}">
                            <el-table-column prop="name" label="店铺名称">
                            </el-table-column>
                            <el-table-column prop="dateTime" label="绑定时间" sortable>
                            </el-table-column>
                            <el-table-column prop="status" label="状态">
                            </el-table-column>
                            <el-table-column label="操作">
                                <el-button type="text" @click="view=true">详情</el-button>
                                <el-button type="text" @click="edit=true">编辑</el-button>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <!--详情-->
                    <el-dialog title="详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="店铺名称">
                                <el-input v-model="form.name" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="绑定时间">
                                <el-input v-model="form.dateTime" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-input v-model="form.status" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="close">返回</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--编辑-->
                    <el-dialog title="编辑" :visible.sync="edit" width="30%" :close-on-click-modal="false">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="状态">
                                <el-select v-model="form.status">
                                    <el-option label="使用中" value="shanghai"></el-option>
                                    <el-option label="停用中" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="close">取消</el-button>
                                <el-button type="primary" @click="update">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
                <div v-if="currentPanel == 'shopAdd'">
                    <shopAdd @currentHandler=currentHandler></shopAdd>
                </div>
            </el-tab-pane>
            <el-tab-pane label="众哲鑫商城" name="second">
                <div>
                    <el-card class="box-card">
                        <el-row>
                            <el-col :span="2"><br>
                                <img src="@/views/merchOrder/images/zzx_logo.png" style="height: 80px;width: 80px">
                            </el-col>
                            <el-col :span="22" >
                                <h3>绑定店铺</h3>
                                <a>绑定成功后，可以：①自动同步客户订单 ②在侧边栏一键发送商品给客户</a>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-button @click="authorization">前往授权</el-button>
                    </el-card>
                    <el-dialog title="授权众哲鑫商城" :visible.sync="formVisible" width="30%" :close-on-click-modal="false">
                        <el-form ref="form" :inline="true" :model="table" label-width="80px">
                            <el-form-item label="店铺名称">
                                <el-input v-model="table.name"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">查询</el-button>
                            </el-form-item><br />
                            <el-form-item label="店铺名称" v-if="table.name != null">
                                <el-input placeholder="众哲鑫店铺" v-model="table.name" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="店铺ID" v-if="table.name != null">
                                <el-input placeholder="001" v-model="table.id" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人" v-if="table.name != null">
                                <el-input placeholder="张三" v-model="table.user" :disabled="true"></el-input>
                            </el-form-item><br />
                            <el-form-item>
                                <el-button @click="close">取消授权</el-button>
                                <el-button type="primary" @click="submit">确认授权</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import shopAdd from "@/views/merchOrder/shop/shopAdd";
export default {
    name: "shop",
    components: {
      shopAdd
    },
    data() {
        return {
            activeName: 'first',
            currentPanel: 'list',
            tableData: [{
                name: '淘宝小店',
                dateTime: '2021-11-15',
                status: '使用中'
            }],

            formVisible: false,
            table: [{
                name: '',
                id: '',
                user: '',
            }],

            view: false,
            form: {
                name: '淘宝小店',
                dateTime: '2021-11-15',
                status: '使用中'
            },
            edit: false,

        }
    },
    methods: {
        currentHandler(type) {
            this.currentPanel = type
        },

        authorization() {
            this.formVisible = true
        },
        submit() {
            this.$message({
                message: '店铺授权成功',
                type: 'success'
            })
            this.close()
        },
        close() {
            this.view = false
            this.formVisible = false
            this.edit = false
        },
        update() {
            this.$message({
                message: '保存成功',
                type: 'success'
            })
            this.close()
        }
    }
}
</script>

<style scoped>

</style>
